<script setup>
import { computed } from 'vue';
const props = defineProps({
  // 动画的类型
  mode: {
    type: String,
    default: 'circle'
  },
  // 动画的颜色
  color: {
    type: String,
    default: '#c7c7c7'
  },
  // 加载图标的大小，单位px
  size: {
    type: [String, Number],
    default: '18'
  },
  // 是否显示动画
  show: {
    type: Boolean,
    default: true
  },
  // 旋转动画的边框宽度，单位px
  borderWidth: {
    type: [String, Number],
    default: '2'
  },
  // 旋转动画的边框圆角，单位px
  borderRadius: {
    type: [String, Number],
    default: '50%'
  }
});

// 加载中圆圈动画的样式
const circleStyle = computed(() => {
  const style = {};
  style.width = props.size + 'px';
  style.height = props.size + 'px';
  style.borderWidth = props.borderWidth + 'px';
  style.borderRadius = props.borderRadius;
  if (props.mode === 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
  return style;
});
</script>

<template>
  <div v-if="show" class="u-loading" :class="mode === 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[circleStyle]" />
</template>

<style lang="less" scoped>
.u-loading-circle {
  display: inline-flex;
  vertical-align: middle;
  background: 0 0;
  border-radius: 50%; /* 默认值 */
  border: 2px solid;
  border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
  animation: u-circle 1.5s linear infinite;
}

.u-loading-flower {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: u-flower 1.5s steps(12) infinite;
  animation: u-flower 1.5s steps(12) infinite;
  background: transparent
    url()
    no-repeat;
  background-size: 100%;
}

@keyframes u-flower {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes u-circle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
